<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <!-- <div class="sn-title">库存容量</div> -->
      <div class="sn-body">
        <div class="wrap-container">
          <div class="pie">
            <div class="pies pie1"></div>
            <div class="pies pie2"></div>
            <div class="pies pie3"></div>
          </div>
          <div class="chartsdom" id="chart_rotate"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'capacityComponent',
  data() {
    return {
      option: null
    }
  },
  mounted() {
    this.getEchart()
  },
  methods: {

    getEchart() {
      const myChart = this.$echarts.init(document.getElementById('chart_rotate'))
      let option
      const gaugeData = [
        {
          value: 60,
          // name: 'Commonly',
          title: {
            offsetCenter: ['0%', '60%']
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '0%']
          }
        }
      ];
      option = {
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            center: ['50%', '51%'],
            pointer: {
              show: false
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#188bfd' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#51eeff' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  },
                  // '#91cc75'
                borderColor: '#2ca2e5'
              }
            },
            axisLine: {
              lineStyle: {
                color: [[1, '#104d8c']],
                width: 12,
               
              }
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: 100
            },
            data: gaugeData,
            title: {
              fontSize: 14
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 28,
              color: '#51eeff',
              borderColor:'transparent',
              borderRadius: 20,
              borderWidth: 1,
              formatter: '{value}%'
            }
          }
        ]
      };
      option && myChart.setOption(option);
      window.addEventListener('resize', () => {
                 myChart.resize()
            })
    }
   
  },
  beforeDestroy() {}
}
</script>

<style lang="scss" scoped>
.sn-container {
  width:6.6462rem;
  height: 3.6154rem;
  .chartsdom {
    width: 2.4308rem;
    height: 2.3692rem;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-41%,-44%)
  }

  .pie {
    position: absolute;
    top: .1538rem;
    width: 100%;
    height: 100%;
    .pies {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 2px;
      left: 0;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .pie1 {
      background-image: url(../../../assets/img/whcircle.png);
      background-size: 3.5077rem 3.5385rem;
      animation: mymove 20s linear infinite;
      -webkit-animation: mymove 20s linear infinite;
    }
    .pie2 {
      background-image: url(../../../assets/img/circle2.png);
      background-size: 3.6923rem 3.5385rem;
      animation: moveto 20s linear infinite;
      -webkit-animation: moveto 20s linear infinite;
    }
    .pie3 {
      background-image: url(../../../assets/img/inner.png);
    }
    .pie4 {
      position: absolute;
      top: 50%;
      left: 36%;
      width: 76px;
      height: 1px;
      background: linear-gradient(to right, rgb(31, 38, 103), rgb(90, 250, 253), rgb(31, 38, 103));
    }
  }
}

@-webkit-keyframes mymove {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes mymove {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes moveto {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes moveto {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
</style>
